<template>
    <div>
        <el-container>
<!--            头部，包括部分个人信息的展示，路由跳转选项，搜索选项-->
        <el-header>
            <div class="header">
<!--                网站图标-->
<!--                <div class="tubiao">-->
<!--                    <img src="../../assets/shouyetou.jpg" alt="">-->
<!--                </div>-->

<!--                网站标题-->
                <el-row>
                    <div class="biaoti">
                        糖尿病友🏠之家
                    </div>
                </el-row>
<!--                部分个人信息的展示区域-->
                <div v-if="basicUserInformation.username" class="ziliaoronqi1">
<!--                    展示我的，消息和设置的盒子-->
                    <div class="ziliaosuoying">
                        <div>
                            <i class="el-icon-user-solid"> 当前用户:{{basicUserInformation.username}}|</i>
                        </div>
<!--                        我的-->
                        <div>
                            <i  class="el-icon-user">
                                <el-dropdown>
                                   <span class="el-dropdown-link">
                                      我的<i class="el-icon-arrow-down el-icon--right"></i>
                                   </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item><router-link  :to="{name:'wodeshoucang'}" >收藏</router-link></el-dropdown-item>
                                        <el-dropdown-item><router-link  :to="{name:'wodetiezi'}" >帖子</router-link></el-dropdown-item>
                                    <div v-if="basicUserInformation.role == '医生' ">
                                        <el-dropdown-item><router-link :to="{name:'wodewenzhang'}" >文章</router-link></el-dropdown-item>
                                    </div>
                                        <div v-if="basicUserInformation.role == '糖尿病患者'">
                                            <el-dropdown-item><router-link :to="{name:'xuetang'}" >血糖</router-link></el-dropdown-item>
                                        </div>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </i>
                        </div>
<!--                        设置-->
                        <div>
                            <i class="el-icon-s-tools">
                                <el-dropdown>
                                   <span class="el-dropdown-link">
                                      设置<i class="el-icon-arrow-down el-icon--right"></i>
                                   </span>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item><router-link :to="{name:'wodeziliao'}">我的资料</router-link></el-dropdown-item>
                                        <el-dropdown-item><router-link  :to="{name:'xiugaiima'}" >修改密码</router-link></el-dropdown-item>
                                        <el-dropdown-item ><router-link  :to="{name:'shouye'}" >退出登录</router-link></el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </i>
                        </div>
                        <!--                        消息-->
                        <div>
                            <i class="el-icon-message">
                                <router-link v-if="shouyexinxilist.countMessage == 0 " :to="{name:'xiaoxi'}">消息</router-link>
                                <router-link v-else :to="{name:'xiaoxi'}">消息({{shouyexinxilist.countMessage}})</router-link>
                            </i>
                        </div>
                    </div>
<!--                    展示头像和id的盒子-->
                    <div class="gerenquyu">
                        <div>
                            <img :src="basicUserInformation.avatar">
                        </div>
                    </div>
                </div>
                <div v-if="openWeidenglu" class="ziliaoronqi2">
                    <router-link :to="{name:'shouye'}"  >未登录</router-link>
                    <div class="gerenquyu">
                        <div>
                            <img src="../../assets/weidenglu.jpg">
                        </div>
                    </div>
                </div>
            </div>
<!--            路由导航栏-->
            <div class="daohanglanghez">
<!--                导航组件-->
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1"><router-link :to="{name:'qiantaihome'}">首页</router-link></el-menu-item>
                    <el-menu-item index="2"><router-link :to="{name:'jieshao'}">糖尿病介绍</router-link></el-menu-item>
                    <el-menu-item index="3"><router-link :to="{name:'qianwenzhang'}">糖尿病文章</router-link></el-menu-item>
                    <el-menu-item index="4"><router-link :to="{name:'luntang'}">病友论坛</router-link></el-menu-item>
                    <el-menu-item index="5"><router-link :to="{name:'yinshi'}">糖尿病饮食</router-link></el-menu-item>
                </el-menu>
<!--                查询和热搜词的那里-->
                <div class="chanxuntiao">
                    <div class="surukuan" >
                        <el-input size="mini" v-model="sousuoguanjianci" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="sousuoanniu">
                        <el-button  size="mini" type="success" plain   @click="dianjisousuo">搜索</el-button>
                    </div>
                    <div class="resouci">
                        近期热搜:
                            <el-link type="primary" @click="fuzhisousuo(shouyexinxilist.words[0])" >{{shouyexinxilist.words[0]}}</el-link>
                            {{kongge}}
                            <el-link type="primary"  @click="fuzhisousuo(shouyexinxilist.words[1])" >{{shouyexinxilist.words[1]}}</el-link>
                            {{kongge}}
                            <el-link type="primary" @click="fuzhisousuo(shouyexinxilist.words[2])" >{{shouyexinxilist.words[2]}}</el-link>
                            {{kongge}}
                            <el-link type="primary" @click="fuzhisousuo(shouyexinxilist.words[3])" >{{shouyexinxilist.words[3]}}</el-link>
                    </div>
                </div>
            </div>
        </el-header>
<!--            中间的路由展示跳转区-->
        <el-main>
            <div class="main">
             <router-view></router-view>
        </div>
        </el-main>
<!--            页脚-->
        <el-footer>
            <div class="footer">页脚</div>
        </el-footer>
        </el-container>
    </div>
</template>

<script>


    export default {
        name: "qiantaihome",
   data(){
            return{
                basicUserInformation:{},
                sousuoguanjianci:'',
                shouyexinxilist:{
                    words: {}
                },
                activeIndex: '',
                kongge: '  ',
                openWeidenglu: false,

            }
         },
        created() {
            this.getyonhuxinxi()
        },

        methods:{
            async   getyonhuxinxi(){
                const token = sessionStorage.getItem("token");
                console.log(token);
                if(token != null){
                    // 用户信息，需要token
                    await this.$http.get('user/info',{headers:{
                            'Authorization':window.sessionStorage.getItem('token')
                        }}).then(jieguo =>{
                        console.log(jieguo.data);
                        if(jieguo.data.code == 200){
                            this.basicUserInformation=jieguo.data.data.basicUserInformation
                        }
                    })
                    this.$http.defaults.headers.common['Authorization'] = token;
                    const {data: res} = await this.$http.get('homePage')
                    // console.log(res.data, '------')
                    res.data.words = res.data.words ? res.data.words : {}
                    this.shouyexinxilist = res.data
                }else{
                    this.basicUserInformation.username = null;
                    const {data: res} = await this.$http.get('homePage')
                    // console.log(res.data, '------')
                    res.data.words = res.data.words ? res.data.words : {}
                    this.shouyexinxilist = res.data;
                    this.openWeidenglu = true;
                }
                console.log(this.basicUserInformation.username);
                console.log("message:"+this.shouyexinxilist.countMessage);

            },
            fuzhisousuo(content){
                this.sousuoguanjianci = content;
                this.dianjisousuo();
            },
            dianjisousuo(){
                console.log(this.sousuoguanjianci);
                this.$router.push({
                    path:'sousuo',
                    query:{
                        resouciyu:this.sousuoguanjianci
                    }
                });
            },
            tuichu(){

                    window.sessionStorage.clear()
                    this.$router.push('/shouye')

            }
        },
        mounted() {

            /**
             * iframe-宽高自适应显示
             */
            function changeMobsfIframe() {
                const mobsf = document.getElementById('mobsf');
                const deviceWidth = document.body.clientWidth;
                const deviceHeight = document.body.clientHeight;
                mobsf.style.width = (Number(deviceWidth) - 240) + 'px'; //数字是页面布局宽度差值
                mobsf.style.height = (Number(deviceHeight) - 64) + 'px'; //数字是页面布局高度差
            }
            changeMobsfIframe()
            window.onresize = function () {
                changeMobsfIframe()
            }
        },

    }
</script>

<style scoped>
 .header{
     display: flex;
     height: 80px;
     width: 100%;
     background-image: url(../../assets/header.jpg);
     padding-top: 13px;
     padding-left: 13px;
     border: solid 1px #eee;
     border-radius: 2%;
     box-shadow: 0 0 10px #EEFFFF;
 }
 .tubiao{
        height: 80px;
        width: 80px;
        border: solid 1px #eee;
        border-radius: 50%;
        padding: 10px;
        /*box-shadow: 0 0 10px #ddd;*/
        background-color: white;
    }
 .tubiao img{
     width: 100%;
     height: 100%;
     border-radius: 50%;
 }
 .biaoti{
     padding-left: 13px;
     line-height: 2em;
     color: white;
     font-size:35px;
 }
 .main{
     width: 100%;
     height: 100%;
     background-color: #FFFFE0;
 }
 .footer{
     width: 100%;
     height: 50px;
     background-color: #dddddd;
 }
 .el-header{
     background-color: white;
     width: 100%;
     height: 100% !important;

 }
 .el-main{
     overflow: hidden;
     color: #FFFACD;
     width: 100%;
     padding-top: 0px!important;
     min-height: 700px;
     height: auto!important;
 }
 .el-footer{
        color: #67C23A;
        width: 100%;
     text-align: center;
        /*height: 80px;*/
    }
 .ziliaoronqi1{
     display: flex;
     position: relative;
     left: 700px;
     width: 500px;

 }
  .ziliaoronqi2{
  display: flex;
      position: relative;
      left: 1150px;
      width: 500px;
  }
 .ziliaosuoying{
     width: 400px;
    display: flex;
     position: relative;
     flex-flow: row wrap;
     justify-content: space-evenly;
    }
 .gerenquyu{
     height: 70px;
     width: 70px;
     border: solid 1px #eee;
     padding: 2px;
     /*box-shadow: 0 0 10px #ddd;*/
     background-color: white;
 }
 .gerenquyu img{
     width: 100%;
     height: 100%;
 }
 .el-dropdown-link{
     color: black;
 }
   .daohanglanghez{
       background-color: #FFFACD;
       width: 100%;
       height: 79px;
       border: solid 1px #FFFACD;

   }
    .el-menu{
        height: 50px !important;
    }
    .el-menu-item{
        height: 50px;
    }
    .chanxuntiao{
        height: 25px;
        width: 100%;
        display: flex;
    }
    .surukuan{
        width: 30%;
        height: 100%;
    }
    .resouci{
        padding-left: 5px;
        width: 70%;
        color: #888888;
        line-height: 1.8em;
        background: #eeeeee;
    }
    /*   .ronqi1{*/
    /*height: 100%;*/
    /*width: 100%;*/
    /*box-shadow: 0 0 10px #ddd;*/
    /*               }*/
    .el-link{
        font-size: 16px;
    }
</style>
